
<template>
	<div id="">
		<div class="rank-item "
		  :class="'ball'+i"
		v-for="(el,i) in datalist"  :key="i" id="ballList" ref="ballListRef">
		<!-- {{isTimss-isTims}}=={{5000*(i+1)}} -->
			   <div class="flip-card ball flex-box animate__animated animate__flipInX ">
					  <div class="box-left flip-card-front flex-box">           
						   <span class="rank">NO.{{(el.mc==10?'':'0')+el.mc}}</span>
					  </div>   
					  <div class="box-right flip-card-back flex-box">
						  <div class="ball  center flex-box animate__animated animate__fadeInRight">
							  <!-- <animateBalls :picIndex="el.mc"></animateBalls> -->
							  <img :src="getImgUrL(el.mc)" alt="" />
						  </div>
						<div class="name">{{el.mc>3?'NO':FiltersStr[el.mc-1]}}</div>
						<div class="time">{{el.time||"2024-06-06"}}</div>
					  </div>
			     </div>
				 <!-- <div  class="viewBox lrItem bgg flex-box  animate__animated"
			 v-if="isTimss-isTims>100+(200*i)&&isTimss-isTims>200"
			 	:class="[!0?'animate__fadeOutRight ':'']">
			    </div> -->
				<!-- <div  class="viewBox lrItem yellowBar flex-box  animate__animated"
				v-else-if="isTimss-isTims<700+(300*i)"
					:class="['animate__fadeInRight' ]">
				</div> -->
				<!-- <img src="/src/assets/yel.png" alt="" srcset="" /> -->
		</div>
	</div>
 
</template>
<script  setup>
import { onMounted, ref } from 'vue'
// import animateBalls from "./animateBalls.vue"
import Axios from 'axios';
import config from "../config.js"
defineProps({
  msg: String
})
let getImgUrL = (img)=>new URL(`/src/assets/${img}.png`, import.meta.url).href
const datalist = ref([
	{mc:1,time:"2024-06-06 08:00"},
	{mc:2,time:"2024-06-06 08:01"},
	{mc:3,time:"2024-06-06 08:03"},
	{mc:4,time:"2024-06-06 08:03"},
	{mc:5,time:"2024-06-06 08:04"},
	{mc:6,time:"2024-06-06 08:05"},
	{mc:7,time:"2024-06-06 08:06"},
	{mc:8,time:"2024-06-06 08:07"},
	{mc:9,time:"2024-06-06 08:08"},
	{mc:10,time:"2024-06-06 08:09"},
])
const FiltersStr = ['CHAMPION','SECOND PLACE','THIRD PLACE']
const count = ref(0)
const listData = ref([])
const canvasRef = ref()
const isTims = ref(false)
let isTimss = ref(false)
onMounted(()=>{
	  isTims.value = new Date().getTime()
	// 创建场景、相机和渲染器，启用抗锯齿
	let timer = setInterval(_=>{
		isTimss.value = new Date().getTime()
		if(isTimss.value-isTims.value>8000){
			clearInterval(timer)
		}
	},500)
	Axios({
		baseURL:(import.meta.env.MODE=='development'?"/api":""),
		url:config.rankUrl
	}).then(res=>{
		console.log("config",res)
		datalist.value = res.date
	})
	
	
	// setTimeout(_=>{
	// 	isTims.value = true
	// },3800)
	})
	// 响应式设计  
</script>

<style lang="less"  scoped>
@import url(./itemAni.less);

.rank-item{
	position: relative;
	margin-bottom:5px;
	min-width: 795px;
	height:56px;
	.viewBox{
		 width: 150vw;
		position: absolute;
		top: 1px;
		left:-50vw;
		z-index: 2;
		 right:-0vw;
		// display: none;
		height:56px;
		border-top: rgb(117,244,150) 3px solid;
		border-bottom: rgb(117,244,150) 3px solid;
		filter: blur(2px);
		background:  linear-gradient(100deg,rgba(38,92,42,.8) 20%,#333 50%,rgba(38,92,42,.8) 100%);
	}
	.bgg{
		 // background:transparent;
		 opacity: .88;
		 filter: blur(1px);
	}
	.yellowBar{
		// background:url(/src/assets/yel.png) no-repeat   !important;
		// background-size: 100%;
		 // -webkit-background-szie:100%;
		 img{
			 height:100%;
		 }
	}
	.ball{
		position: absolute;
		z-index: 222;
		top:0;
		height: 100%;
		
		img{
		
			height: 44px;
		width:44px;
		}
		
	}
	.flip-card{
		
		min-width: 100%;
		background-color: rgba(33,33,33,.77);
		>div{
			height:56px;
		}
		*{
			font-weight: 500;
		}
		&-front{
			padding:8px;
			font-size: 40px;
			color:rgb(20,20,20);
			width: 110px;
			 // font-family: Verdana, Geneva, Tahoma, sans-serif;
			background: rgba(122,122,122,1);
		}
		
		&-back {
			.ball{
				padding: 0 40px;
			}
			.name{
				margin-left: 105px;
				width:250px;
				// font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				font-size: 36px;
				color: rgb(154,31,33);
			}
			.time{
				font-size: 36px;
				padding: 0 5px 0px 38px;
				color: rgb(154,31,33);
				min-width: 280px;
				white-space: nowrap;
				flex: 1;
			}
		}
	
	}
}
</style>
